/**
 * Created by chocolate on 16/5/18.
 */

//引入系统模块
import React, {
  Component,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TabBarIOS,
  ListView,
} from 'react-native';

//引入TestData模块定义的测试数据变量,此处采用对象解构赋值
//TestData模块可以定义多种类型的测试数据;
var {noticeTestData} = require("./TestData");
var Title =require('./Title');
var query = require('./Query').query;

class NoticeList extends Component{

  //props,外部调用NoticeList的时候,传入的属性
  constructor(props){
    super(props);
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.notices = [];
    this.state = {
        dataSource:this.ds.cloneWithRows(noticeTestData),
      }
  }

  componentDidMount(){
    this._refreshNotices();
  }

  _refreshNotices(){
    //this.setState({isLoading:true});
    this.notices = [];
    query.getNotices(this,function(owner,response){
      if(response.success === true){
        owner.notices = response.message;
        owner._updateLiswView();}})
  }

  _updateLiswView(){
    this.setState({dataSource:this.ds.cloneWithRows(this.notices)});
  }

  _onPressRow(rowData){
    console.log("_onPressRow");
    this.props.navigator.push({name:'NoticeScreen',params:{notice:rowData}});
  }

  _renderRecord(rowData: string,sectionID: number, rowID: number){
    return (

        <TouchableOpacity onPress = {()=>{this._onPressRow(rowData);}}>
          <View style={styles.listRow}>
            <Text style={styles.noticeTitle}>{rowData.title}</Text>
            <View style={styles.noticeFooter}>
              <Text style={styles.noticeSchool}>来自{rowData.school_name}</Text>
              <View style={{width:10}}/>
              <Text style={styles.noticeDate}>{rowData.date}</Text>
            </View>
          </View>
        </TouchableOpacity>
    )
  }

  _onPressReturn(){
    this.props.navigator.pop();
  }

  //渲染学校公告列表(应该以日期作为section header,每条内容为:标题、摘要、学校)
  render(){
    return(
      <View style={styles.container}>
        <Title title={{left:"返回",center:"校务公告",right:"刷新",
              leftAct:this._onPressReturn.bind(this),rightAct:this._refreshNotices.bind(this)}}></Title>
        <ListView dataSource={this.state.dataSource}
                  renderRow={this._renderRecord.bind(this)}
                  enableEmptySections={true}
                  style={styles.listView} />
      </View>
    )

  }
}

//定义本模块的样式表
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    flex: 1,
  },
  listView: {
    backgroundColor: '#eee',
  },
  listRow:{
    alignSelf:'stretch',
    flex: 1,
    height:80,
    flexDirection:'column',
    justifyContent: 'space-around',
    backgroundColor: 'white',
    padding: 10,
    marginBottom: 8,
  },
  noticeTitle:{
    fontSize:18,
    color:'#2981b1',
  },
  noticeFooter:{
    marginTop:10,
    flexDirection:'row',
    justifyContent:'space-between',
  },
  noticeDate:{
    fontSize:14,
    color:'gray',
  },
  noticeSchool:{
    fontSize:14,
    color:'gray',
  }
})

module.exports = NoticeList;